<!-- 滑块 -->
<template>
  <div class="silder-range" :class="rangeStatus ? 'success' : ''">
    <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>
    {{ rangeStatus ? successText : startText }}
    <div ref="green" class="green">{{ rangeStatus ? successText : "" }}</div>
  </div>
</template>
<script>
export default {
  props: {
    //成功图标
    successIcon: {
      type: String,
      default: "el-icon-success",
    },
    //成功文字
    successText: {
      type: String,
      default: "验证成功",
    },
    //开始的图标
    startIcon: {
      type: String,
      default: "el-icon-d-arrow-right",
    },
    //开始的文字
    startText: {
      type: String,
      default: "拖动滑块到最右侧",
    },
  },
  name: "SilderVerify",
  data() {
    return {
      rangeStatus: "",
    };
  },
  methods: {
    rangeMove(e) {
      let ele = e.target;
      ele.style.cursor = 'grabbing' //点击之后光标变为抓取
      let startX = e.clientX;
      let eleWidth = ele.offsetWidth;
      let parentWidth = ele.parentElement.offsetWidth;
      let MaxX = parentWidth - eleWidth;
      if (this.rangeStatus) {
        //不运行
        return false;
      }
      document.onmousemove = (e) => {
        let endX = e.clientX;
        this.disX = endX - startX;
        if (this.disX <= 0) {
          this.disX = 0;
        }
        if (this.disX >= MaxX - eleWidth) {
          //减去滑块的宽度,体验效果更好
          this.disX = MaxX;
        }
        ele.style.transition = "0s all";
        ele.style.transform = "translateX(" + this.disX + "px)";
        this.$refs.green.style = `transition:0s all;width:${this.disX}px;position:absolute;left:0;top:0`;
        e.preventDefault();
      };
      document.onmouseup = () => {
        if (this.disX !== MaxX) {
          ele.style.cursor = 'grab'
          ele.style.transition = "1s all";
          ele.style.transform = "translateX(0)";
          this.$emit("failed", this.rangeStatus);
        } else {
          this.rangeStatus = true;
          this.$emit("success", this.rangeStatus);
        }

        if (this.disX < MaxX) {
          this.$refs.green.style.width = 0 + "px";
          this.$refs.green.style.transition = "1s all";
        }
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.silder-range {
  position: relative;
  background-color: #CBE5FA;
  transition: 1s all;
  user-select: none;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 54px;
  font-weight: bold;

  .green {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #7ac23c;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
  }
}

@keyframes donghua {
  0% {
    transform: translateX(-10px);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(0px);
  }

  75% {
    transform: translateX(5px);
  }

  100% {
    transform: translateX(10px);
  }
}

@keyframes down {
  100% {
    transform: translateX(0px);
  }
}

.silder-range i {
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  height: 100%;
  color: #fff;
  background-color: #409eff;
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;

  &::before {
    animation-name: donghua;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
  }
}

.silder-range.success {
  background-color: #7ac23c;
  color: #fff;
  // color: #409eff;

}

.silder-range.success i {
  color: #fff;
  border: none;
  background-color: #409eff;
  font-size: 20px;

  &::before {
    animation-name: down;
    animation-duration: 1ms;
  }
}
</style>